<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../js/plugins/echarts/echarts.common.min.js"></script>
</head>
<body>
    <div id="main" style="width: 1500px;height:800px;"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data: ['订单数', '总消费金额', '总优惠金额','总实收金额']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ${groupTypeList},
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '金额',
                    min: 0,
                    //max: 250,
                    //interval: 50,
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                {
                    type: 'value',
                    name: '数量',
                    min: 0,
                    //max: 25,
                    //interval: 5,
                    axisLabel: {
                        formatter: '{value} 个'
                    }
                }
            ],
            series: [
                {
                    name: '总消费金额',
                    type: 'bar',
                    data: ${totalAmountList},
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    }
                },
                {
                    name: '总优惠金额',
                    type: 'bar',
                    data: ${discountAmountList},
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    }
                },
                {
                    name: '总实收金额',
                    type: 'bar',
                    data: ${payAmountList},
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    }
                },
                {
                    name: '订单数',
                    type: 'line',
                    yAxisIndex: 1,
                    data: ${totalCountList},
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>